<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #box{
            width: 400px;
            height: 400px;
            border: 1px solid #000;
            background-color: #09f;
            position: absolute;
            left: 100px;
            top: 100px;
        }
    </style>
</head>
<body>
    <h1></h1>
    <hr>
    <div id="box"></div>

    <script>
        // - onmousedown   鼠标按住触发
        box.onmousedown = function (en){
            this.style.backgroundColor = '#f90';
            // 显示 指定的键位码
            console.log(en.button);
        }
        // - onmouseup     鼠标松开触发
        box.onmouseup = function (){
            this.style.backgroundColor = '#09f';
        }
        // - onmousemove   鼠标移动触发
        box.onmousemove = function (en){
            console.log('我在移动: ' + Math.random());
            // document.title = en.x + ',' + en.y;
            // 显示 以当前对象 为准的坐标;
            document.title = en.offsetX + ',' + en.offsetY;
        }
    </script>    

</body>
</html>